<!DOCTYPE html>
<html lang="zh-CN" xml:lang="zh-CN">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta charset="UTF-8">
    <title>我的购物车-小米商城</title>
    <meta name="viewport" content="width=1226">

    <link rel="stylesheet" href="css/base.min.css">
    <link rel="stylesheet" type="text/css" href="css/cart.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <style>
        .addbox{position:fixed;right:0;top:0;bottom:0;background:rgba(255,255,255,0.98);width:640px;z-index: 100;padding:30px;box-shadow: 0 0 1em #333;}
        .addbox p{padding:10px;}
        .addbox p input{width:100%;border-radius:6px;height:36px;line-height: 36px;border:1px solid #eee;outline:none;text-indent: 1em;}
        .maskover{position:fixed;right:0;left:0;bottom: 0;top: 0;background:#000;opacity: 0.3;z-index: 99}
    </style>

</head>

<body>
<div class="site-header site-mini-header">
    <div class="container">
        <div class="header-logo">
            <a class="logo ir" href="//www.mi.com/index.html" title="小米官网" data-stat-id="1de2e5c522d7b543"
               onclick="_msq.push(['trackEvent', '5df97b551662ffe7-1de2e5c522d7b543', '//www.mi.com/index.html', 'pcpid', '']);">小米官网</a>
        </div>
        <div class="header-title has-more" id="J_miniHeaderTitle">
            <h2>我的购物车</h2>
            <p>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
        </div>
        <div class="topbar-info" id="J_userInfo"><span class="user"><a rel="nofollow" class="user-name"
                                                                       href="//my.mi.com/portal" target="_blank"><span
                class="name">108112069</span><i class="iconfont"></i></a>
					<ul class="user-menu">
						<li>
							<a rel="nofollow" href="//my.mi.com/portal" target="_blank">个人中心</a>
						</li>
						<li>
							<a rel="nofollow" href="//order.mi.com/user/comment" target="_blank">评价晒单</a>
						</li>
						<li>
							<a rel="nofollow" href="//order.mi.com/user/favorite" target="_blank">我的喜欢</a>
						</li>
						<li>
							<a rel="nofollow" href="//account.xiaomi.com/" target="_blank">小米帐号</a>
						</li>
						<li>
							<a rel="nofollow" href="//order.mi.com/site/logout">退出登录</a>
						</li>
					</ul>
					</span><span class="sep">|</span>
            <a rel="nofollow" class="link link-order" href="//static.mi.com/order/" target="_blank">我的订单</a>
        </div>
    </div>
</div>

<div class="page-main" id="app">

    <div class="container">

        <div class="cart-empty hide" id="J_cartEmpty">
            <h2>您的购物车还是空的！</h2>
            <p class="login-desc">登录后将显示您之前加入的商品</p>
            <a href="javascript:void(0);" class="btn btn-primary btn-login" id="J_loginBtn"
               data-stat-id="6ab7b2b79aa79ef3"
               onclick="_msq.push(['trackEvent', '5df97b551662ffe7-6ab7b2b79aa79ef3', 'javascript:void0', 'pcpid', '']);">立即登录</a>
            <a href="//list.mi.com/0" class="btn btn-primary btn-shoping J_goShoping" data-stat-id="f7e2e8ff3af3bfec"
               onclick="_msq.push(['trackEvent', '5df97b551662ffe7-f7e2e8ff3af3bfec', '//list.mi.com/0', 'pcpid', '']);">马上去购物</a>
        </div>
        <div id="J_cartBox" class="">
            <div class="addonitems-tips J_addonitemsTips">小米发货商品满150元免运费,还需<span>101<span>元<a class="J_getaddItems"
                                                                                              href="javascript:void(0);">去凑单 &gt;</a></span></span>
            </div>
            <div class="cart-goods-list">
                <div class="list-head clearfix">
                    <div class="col col-check" @click="selectAll"><i class="iconfont icon-checkbox icon-checkbox-selected"
                                                  id="J_selectAll" v-text="selectFlag==0?'√':' '">√</i>全选
                    </div>
                    <div class="col col-img">&nbsp;</div>
                    <div class="col col-name">商品名称</div>
                    <div class="col col-price">单价</div>
                    <div class="col col-num">数量</div>
                    <div class="col col-total">小计</div>
                    <div class="col col-action">操作</div>
                </div>
                <div class="list-body" id="J_cartListBody">
                    <div class="item-box" v-for="(shopCart,index) in shopCartList">
                        <div class="item-table J_cartGoods"
                             data-info="{ commodity_id:'1181300018', gettype:'buy', itemid:'2181300017_0_buy', num:'1'} ">
                            <div class="item-row clearfix">
                                <div class="col col-check" @click="selectOne(shopCart.id,index)"><i
                                        class="iconfont icon-checkbox icon-checkbox-selected J_itemCheckbox"
                                        data-itemid="2181300017_0_buy" data-status="1" v-text="shopCart.isDelete==0?'√':' '">√</i></div>
                                <div class="col col-img">
                                    <a href="//item.mi.com/1181300018.html" target="_blank"> <img alt=""
                                                                                                  :src="shopCart.img"
                                                                                                  width="80"
                                                                                                  height="80"> </a>
                                </div>
                                <div class="col col-name">
                                    <div class="tags"></div>
                                    <div class="tags"></div>
                                    <h3 class="name"><a href="//item.mi.com/1181300018.html" target="_blank"> {{shopCart.title}}
                                        白色 </a></h3></div>
                                <div class="col col-price"> {{shopCart.price}}元
                                    <p class="pre-info"></p>
                                </div>
                                <div class="col col-num">
                                    <div class="change-goods-num clearfix J_changeGoodsNum">
                                        <a href="javascript:void(0)" class="J_minus" @click="minusItem(index)"><i class="iconfont">-</i></a>
                                        <input tyep="text" name="2181300017_0_buy" v-model="shopCart.num" data-num="1"
                                               data-buylimit="5" autocomplete="off" class="goods-num J_goodsNum">
                                        <a href="javascript:void(0) " class="J_plus " @click="plusItem(index)"><i class="iconfont">+</i></a>
                                    </div>
                                </div>
                                <div class="col col-total "> {{shopCart.num * shopCart.price | rand(2)}}元 <p class="pre-info "></p></div>
                                <div class="col col-action "><a id="2181300017_0_buy " data-msg="确定删除吗？ "
                                                                href="javascript:void(0); " title="删除 "
                                                                class="del J_delGoods " @click="delItem(shopCart.id)"><i class="iconfont ">x</i></a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 加价购 -->
            <div class="raise-buy-box " id="J_raiseBuyBox "></div>

            <div class="cart-bar clearfix " id="J_cartBar ">
                <div class="section-left ">
                    <a href="//list.mi.com/0 " class="back-shopping J_goShoping " data-stat-id="b16361b4c5491b6d "
                       onclick="_msq.push([ 'trackEvent', '5df97b551662ffe7-b16361b4c5491b6d', '#', 'pcpid', '']); ">继续购物</a>
                    <span class="cart-total ">共 <i id="J_cartTotalNum ">1</i> 件商品，已选择 <i
                            id="J_selTotalNum ">1</i> 件</span>
                    <span class="cart-coudan hide " id="J_coudanTip ">
                        ，还需 <i id="J_postFreeBalance ">101.00</i> 元即可免邮费  <a href="javascript:void(0); "
                                                                             id="J_showCoudan "
                                                                             data-stat-id="cfc8337d6cbfdef7 "
                                                                             onclick="_msq.push([ 'trackEvent', '5df97b551662ffe7-cfc8337d6cbfdef7', 'javascript:void0', 'pcpid', '']); ">立即凑单</a>
                    </span>
                </div>
                <span class="activity-money hide ">
                    活动优惠：减 <i id="J_cartActivityMoney ">0</i> 元
                </span>
                <span class="total-price ">
                    合计：<em id="J_cartTotalPrice ">{{totalPrice | rand(2)}}</em>元
                </span>
                <a href="javascript:void(0); " class="btn btn-a btn btn-primary " id="J_goCheckout "
                   data-stat-id="9bd56b7232f4ef1a "
                   onclick="_msq.push([ 'trackEvent', '5df97b551662ffe7-9bd56b7232f4ef1a', 'javascript:void0', 'pcpid', '']); ">去结算</a>

                <div class="no-select-tip hide " id="J_noSelectTip ">
                    请勾选需要结算的商品
                    <i class="arrow arrow-a "></i>
                    <i class="arrow arrow-b "></i>
                </div>
            </div>
        </div>
        <button @click="openAddDialog">打开添加购物车</button>


        <div class="addbox animated fadeInRightBig" v-show="openFlag">
            <h1>添加购物车数据</h1>
            <form>
                <p>商品名称：<input type="text" v-model="shopcart.title"></p>
                <p>商品图片：<input type="text" v-model="shopcart.img"></p>
                <p>商品价格：<input type="text" v-model="shopcart.price"></p>
                <p>商品数量：<input type="text" v-model="shopcart.num"></p>
                <p>商品地址：<input type="text" v-model="shopcart.url"></p>
                <p>商品描述：<input type="text" v-model="shopcart.description"></p>
                <p><button @click.prevent="saveShopCart">添加到购物车</button></p>
            </form>
        </div>
        <div class="maskover" @click="hideAddDialog" v-show="openFlag"></div>
        <div class="cart-recommend hide " id="J_historyRecommend "></div>


    </div>
</div>

<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>

<script>
    Vue.filter("rand",function (value,redix) {
        return value.toFixed(redix);
    });
    var app = new Vue({
        el:"#app",
        data:{
            shopCartList:[],
            shopcart:{},
            pageNum:1,
            pageSize:5,
            selectFlag:0,
            openFlag:false
        },
        computed:{
            totalPrice(){
                let total = 0;
                this.shopCartList.forEach(function (shopCart, index) {
                    if (shopCart.isDelete==0){
                        total += shopCart.price * shopCart.num;
                    }
                });
                return total;
            }
        },
        methods:{
            findList(){
                axios.get("http://127.0.0.1:8082/list?pageNum=" +
                    this.pageNum + "&pageSize=" + this.pageSize).then( resp =>{
                    this.shopCartList = resp.data.list;
                    this.isSelectAll();
                })
            },
            minusItem(index){
                this.shopCartList[index].num--;
                if (this.shopCartList[index].num<1){
                    this.shopCartList[index].num=1
                }
            },
            plusItem(index){
                this.shopCartList[index].num++;
            },
            selectOne(id,index){
                    if (this.shopCartList[index].isDelete!=0) {
                        // axios.put("http://127.0.0.1:8082/selectOne?index=0&id="+id).then((resp) => {
                        //     if (resp.data>0){
                        //         this.findList();
                        //     }
                        // })
                        this.shopCartList[index].isDelete=0;
                        this.isSelectAll();
                    }else{
                        // axios.put("http://127.0.0.1:8082/selectOne?index=1&id="+id).then((resp) => {
                        //     if (resp.data>0){
                        //         this.findList();
                        //     }
                        // })
                        this.shopCartList[index].isDelete=1;
                        this.isSelectAll();
                    }
            },
            selectAll(){
                    if (this.selectFlag!=0) {
                       // axios.put("http://127.0.0.1:8082/selectAll?index=0").then((resp) => {
                       //     if (resp.data>0){
                       //         this.findList();
                       //     }
                       // })
                        this.shopCartList.forEach((shopCart, index) =>{
                           this.shopCartList[index].isDelete=0
                        });
                        this.isSelectAll();
                    }else{
                        // axios.put("http://127.0.0.1:8082/selectAll?index=1").then((resp) => {
                        //     if (resp.data>0){
                        //         this.findList();
                        //     }
                        // })
                        this.shopCartList.forEach((shopCart, index) =>{
                            this.shopCartList[index].isDelete=1
                        });
                        this.isSelectAll();
                    }
            },
            isSelectAll(){
                this.selectFlag=0;
                this.shopCartList.forEach((shopCart, index) =>{
                    if (this.shopCartList[index].isDelete!=0) {
                        this.selectFlag=1;
                    }
                });

            },
            openAddDialog(){
             this.openFlag=true;
            },
            saveShopCart(){
            axios.post("http://127.0.0.1:8082/save",this.shopcart).then((resp) =>{
              if (resp.data>0){
                  this.hideAddDialog();
                  this.shopcart={};
                  this.findList();
              }
            })
            },
            hideAddDialog(){
                this.openFlag=false;
            },
            delItem(id){
                if (confirm("请确定是否删除")) {
                    axios.delete("http://127.0.0.1:8082/delete?id="+id).then((resp) =>{
                     if (resp.data>0){
                         alert("删除成功!");
                         this.findList();
                     }
                    })
                }

            }
        },
        created(){
            this.findList();

        }
    })
</script>
</body>
</html>